<template>
  <div>
    <!-- 面包屑导航 -->
    <a-breadcrumb>
      <a-breadcrumb-item>
        <router-link to="/admin">仪表盘</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>{{this.$route.name}}</a-breadcrumb-item>
    </a-breadcrumb>
    <!-- /面包屑导航 -->
    <a-row>
      <a-col :span="2">
        <a-button size="small" type="primary" @click="$router.push('/admin/itemAdd')">增加商品</a-button>
      </a-col>
      <a-col :span="2" :push="20">
        <a-button ghost size="small" type="primary" >导出为excel</a-button>
      </a-col>
    </a-row>
    <!-- 商品列表 -->
    <a-table
      :pagination="{
        total: this.total,
        current:this.page,
        pageSize:this.pageSize
      }"
      :columns="columns"
      :data-source="items"
      :bordered="true"
      :scroll="{y: 388 }"
      rowKey="id"
      @change="changePage"
      >
      <a slot="name" slot-scope="text">{{ text }}</a>

      <!-- 商品描述修饰 -->
      <span slot="desc" slot-scope="text, record">
        <a-tooltip placement="topLeft" :title="record.desc">
          {{record.desc.substr(0,12) + '...'}}
        </a-tooltip>
      </span>
      <!-- /商品描述修饰 -->

      <!-- 销量修饰 -->
      <span slot="sale" slot-scope="text, record">
        <a-tag :color="record.sale>500 ? 'red' : 'green'">
          {{record.sale}}
        </a-tag>
      </span>
      <!-- /销量修饰 -->

      <!-- 插槽 开关使用 -->
      <div slot="onSale" slot-scope="text,record">
        <a-switch
          checked-children="上架"
          un-checked-children="下架"
          :default-checked="record.onSale"
          :disabled="true"
        />
      </div>
      <!-- /插槽 开关使用 -->

      <!-- 插槽使用 照片 -->
      <span slot="thumb" slot-scope="text, record">
        <img :src="record.thumb" />
      </span>
      <!-- /插槽使用 照片 -->

      <!-- 上架时间戳转换 -->
      <span slot="createAt" slot-scope="text, record">
        {{dayjs(record.createAt).format("YYYY/MM/DD")}}
      </span>
      <!-- /上架时间戳转换 -->

      <!-- 插槽使用 放入操作按钮开始 -->
      <div slot="operate" slot-scope="text, record">
        <a-button
          type="primary"
          size="small"
          :style="{ marginRight: '8px' }"
          @click="edit(record.id)"
        >
          编辑</a-button
        >
        <a-popconfirm
          placement="topRight"
          cancelText="No"
          okText="Yes"
          @confirm="confirm(record.id)"
        >
        <template slot="title">
          <p>您确认要删除嘛</p>
        </template>
        <a-button
        type="danger"
        size="small"
        >
          删除
        </a-button>
        </a-popconfirm>
      </div>
      <!-- 插槽使用 放入操作按钮结束 -->
    </a-table>
    <!-- /商品列表 -->
  </div>
</template>

<script>
import { fetchItems, fetchdelItem } from '@api'
import dayjs from 'dayjs'
const columns = [
  {
    title: '商品名称',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '描述',
    dataIndex: 'desc',
    key: 'desc',
    scopedSlots: { customRender: 'desc' }
  },
  {
    title: '销量',
    dataIndex: 'sale',
    key: 'sale',
    scopedSlots: { customRender: 'sale' }
  },
  {
    title: '价格',
    dataIndex: 'price',
    key: 'price'
  },
  {
    title: '库存',
    dataIndex: 'store',
    key: 'store'
  },
  {
    title: '上下架',
    dataIndex: 'onSale',
    key: 'onSale',
    scopedSlots: { customRender: 'onSale' }
  },
  {
    title: '上架时间',
    dataIndex: 'createAt',
    key: 'createAt',
    scopedSlots: { customRender: 'createAt' }
  },
  {
    title: '封面图片',
    dataIndex: 'thumb',
    key: 'thumb',
    scopedSlots: { customRender: 'thumb' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'operate' },
    key: 'operate',
    width: 150
  }
]
export default {
  data () {
    return {
      items: [],
      total: 0,
      page: 1,
      pageSize: 10,
      columns,
      dayjs: dayjs
    }
  },
  created () {
    this.fetchItems()
  },
  methods: {
    confirm (id) {
      fetchdelItem({
        id
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg, 1, () => {
            this.$router.go(0)
          })
        }
      })
    },
    edit (id) {
      this.$router.push('/admin/itemEdit?id=' + id)
    },
    del (id) {
      fetchdelItem({
        id
      }).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.$message.success(res.data.msg, 1, () => {
            this.$router.go(0)
          })
        }
      })
    },
    changePage (page, pageSize) {
      this.page = page.current
      this.pageSize = page.pageSize
      this.fetchItems()
    },
    fetchItems () {
      fetchItems({
        page: this.page,
        pageSize: this.pageSize
      }).then((res) => {
        if (res.data.code === 200) {
          this.items = res.data.data.lists
          this.total = res.data.data.total
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
